<template>
	<van-popup :show="showDialog" position="bottom" custom-style="border-radius: 4rpx 4rpx 0rpx 0rpx" @close="close">
		<view class="c-bottom-dialog">
			<view class="dialog-title">
				<view class="">{{title}}</view>
				<image src="/static/dialog_cha.png" mode="widthFix" @click="close"></image>
			</view>
			<slot></slot>
		</view>
	</van-popup>
</template>

<script>
	export default {
		name: "c-bottom-dialog",
		props: {
			title: {
				typeof: String,
				default: '标题'
			}
		},
		data() {
			return {
				showDialog: false
			};
		},
		methods: {
			show() {
				let page = getCurrentPages()
				let route = page[page.length - 1].route
				if (route === 'pages/index/index' || route === 'pages/workbench/workbench' || route ===
					'pages/mine/mine') {
					uni.hideTabBar()
				}
				this.showDialog = true
			},
			close() {
				this.showDialog = false
				let page = getCurrentPages()
				let route = page[page.length - 1].route
				if (route === 'pages/index/index' || route === 'pages/workbench/workbench' || route ===
					'pages/mine/mine') {
					setTimeout(() => {
						uni.showTabBar()
					}, 400)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.c-bottom-dialog {
		padding: 24rpx 24rpx 0;
		font-size: 30rpx;

		.dialog-title {
			text-align: center;
			font-size: 26rpx;
			color: #8A8F99;
			margin-bottom: 24rpx;
			position: relative;

			image {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				right: 0;
				top: 0
			}
		}
	}
</style>